<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .asd{width: 100px;
            height: 100px;
            border: 2px solid #000;
            position: absolute;
            position: fixed;
            top: 10px;
            left: 10px;
        }
        .aas{
            width: 96px;
            height: 96px;
            background: red;
            border: 3px solid rgba(0,0,0,0);
            border-radius: 10px;
            position: fixed;
            top: 10px;
            left: 10px;
        }
        .aas1{
            width: 96px;
            height: 96px;
            background: red;
            border: 3px solid rgba(0,0,0,0);
            border-radius: 10px;
            position: fixed;
            top: 180px;
            left:180px;
        }
    </style>
</head>
<body>
    <div class="asd"></div>
    <div class="aas"></div>
    <div class="aas1"></div>
</body>
</html>
<script>
    const asd = document.querySelector('.asd')
    const aas = document.querySelector('.aas')
    const aas1 = document.querySelector('.aas1')
 

    function move(){

        const as = getComputedStyle(aas);
        const top = getComputedStyle(aas1)
        let flg = parseInt(top.top)
        let flag = parseInt(as.top);
        let fleg = parseFloat(as.left);
        const id = setInterval(() => {
            flag += 5;
            fleg += 5;
            asd.style.top = flag + 'px';
            asd.style.left = fleg + 'px';
            if(flag === flg){
                clearInterval(id)
            }
        },16)

    }

    // document.addEventListener('keydown',(e) => {
    //     if(e.keyCode === 83){
    //         move()
    //     }
    // })

    // const step = document.querySelectorAll('div')
    // step.forEach((e) => {
    //     e.addEventListener('click',() => {
            
    //     })
    // })


</script>